<template>
  <el-container v-if="finish" >
    <el-main>
      <div class="header">
        <div class="headerItem">
          <span>今日收入</span>
          <p>{{ dashboardData?.today_paid_sum }}</p>
          <div class="headerinfo">
            <span>昨日收入：{{ dashboardData?.yesterday_paid_sum }}</span>
            <span>较昨日：<strong>{{ (dashboardData?.yesterday_paid_sum === 0 || (dashboardData?.today_paid_sum - dashboardData?.yesterday_paid_sum) < 0) ? 0
                : ((dashboardData?.today_paid_sum - dashboardData?.yesterday_paid_sum) /
                  dashboardData.yesterday_paid_sum).toFixed(2) * 100
            }}%</strong></span>
          </div>
        </div>
        <div class="headerItem">
          <span>今日付费用户</span>
          <p>{{ dashboardData?.today_paid_user_num }}</p>
          <div class="headerinfo">
            <span>昨日付费用户：{{ dashboardData?.yesterday_paid_user_num }}</span>
            <span>较昨日：<strong>{{ (dashboardData?.yesterday_paid_user_num === 0 || (dashboardData?.today_paid_user_num - dashboardData?.yesterday_paid_user_num) < 0) ? 0 :
                ((dashboardData?.today_paid_user_num - dashboardData?.yesterday_paid_user_num) /
                  dashboardData?.yesterday_paid_user_num).toFixed(2) * 100
            }}%</strong></span>
          </div>
        </div>
        <div class="headerItem">
          <div class="headerItemSmall">
            <span>总用户</span>
            <span class="headernum">{{ dashboardData?.user_count }}</span>
            <span>今日新增：<strong>{{ (dashboardData?.today_register_user_count / dashboardData?.user_count * 100).toFixed(1)
            }}%</strong></span>
          </div>
          <div class="headerItemSmall">
            <span>本月收益</span>
            <span class="headernum">{{ dashboardData?.this_month_paid_sum }}</span>
            <span>较上月:<strong style="color: red;">{{ (dashboardData?.this_month_paid_sum / dashboardData?.last_month_paid_sum - 1).toFixed(2)
                * 100
            }}%</strong></span>
          </div>
        </div>
      </div>
      <div class="nav" @click="govod">
        <div class="navTitle">快速访问</div>
        <div class="navItem">
          <div class="navItemImg"><img src="@/assets/home/demand.png" alt=""></div>
          <div class="navCourse">录播课</div>
        </div>
      </div>
      <div class="mineechart">
        <div class="mineechartTitle">统计分析</div>
        <div class="mineechartCon" >
          <el-button :class="{ bg: changebg === 'userRegister' }" @click="req('userRegister')">每日注册用户</el-button>
          <el-button :class="{ bg: changebg === 'orderCreated' }" @click="req('orderCreated')">每日创建订单</el-button>
          <el-button :class="{ bg: changebg === 'orderPaidCount' }" @click="req('orderPaidCount')">每日已交付的订单</el-button>
          <el-button :class="{ bg: changebg === 'orderPaidSum' }" @click="req('orderPaidSum')">每日营收</el-button>
          <div class="block">
            <el-date-picker v-model="times" type="daterange" range-separator="-" :start-placeholder="begintime"
              :end-placeholder="finishtime" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="getDate(changebg)">筛选</el-button>
          </div>
          <div id="myecharts"></div>
        </div>
      </div>
    </el-main>
    <el-footer>
      <div class="firstfoot">Powered By MeEdu</div>
      <div class="secendfoot">PHP7.3.31 <span>主程序v4.7后管</span> v4.6.3s</div>
    </el-footer>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
import { getDashboard, statistic } from '@/network/user'

export default {
  data() {
    return {
      loading:true,
      dashboardData: {},
      changebg: "userRegister",
      begintime: "开始时间",
      finishtime: "结束时间",
      params: {
        start_at: '',
        end_at: '',
      },
      finish: false,
      dataset: [],
      labels: [],
      times: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      }
    }
  },
  methods: {
    govod() {
      this.$router.push("/course/vod/index");
    },
    async getDashboardData() {
      let { data } = await getDashboard();
      this.dashboardData = data;
      this.finish = true;
      this.loading=false
    },
    req(val) {
      this.changebg = val;
      statistic(val, this.params).then(res => {
        let legendData = [];
        let seriesName = '';
        if(res){
          this.labels = res?.data?.labels;
        this.dataset = res?.data?.dataset;
        if (val === "userRegister") {
          legendData = ["每日新增用户"];
          seriesName = "每日新增用户";
        }
        if (val === "orderCreated") {
          legendData = ["每日新增订单量"];
          seriesName = "每日新增订单量";
        }
        if (val === "orderPaidCount") {
          legendData = ["每日支付订单"];
          seriesName = "每日支付订单";
        }
        if (val === "orderPaidSum") {
          legendData = ["每日支付订单总额"];
          seriesName = "每日支付订单总额";
        }
        this.initEcharts(this.dataset, this.labels, legendData, seriesName);
        }
        
      })
    },
    initEcharts(value, item, legendData, seriesName) {
      var myEcharts = echarts.getInstanceByDom(document.getElementById("myecharts"));
      if (!myEcharts) {
        myEcharts = echarts.init(document.getElementById("myecharts"));
      }
      let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: legendData,
          right: 100
        },
        xAxis: {
          boundaryGap: false,
          data: item
        },
        yAxis: {},
        series: [{ name: seriesName, type: "line", data: value }]
      }
      myEcharts.setOption(option);
    },
    getDate(val) {
      let oldstart=this.params.start_at
      let oldend=this.params.end_at 
      // console.log(this.times)
      if (this.times !=null) {
        let timedata = this.times.slice(",");

        let ymd = new Date(timedata[0]);
        let y = ymd.getFullYear();
        let m = ymd.getMonth() + 1;
        let d = ymd.getDate();
        this.params.start_at = y + "-" + m + "-" + d;
        oldstart=this.params.start_at
        this.begintime = this.params.start_at;       
        // this.params.start_at = y + "-" + m + "-" + d;
        let ymd1 = new Date(timedata[1]);
        let y1 = ymd1.getFullYear();
        let m1 = ymd1.getMonth() + 1;
        let d1 = ymd1.getDate();
        this.params.end_at = y1 + "-" + m1 + "-" + d1;
        oldend=this.params.end_at
        this.finishtime = this.params.end_at; 
        
        this.req(val);
      }else{
        this.params.start_at =oldstart
        this.params.end_at =oldend
        this.req(val);
      }
    },
    initTime() {
      let nowDate = new Date().getTime();
      this.params.end_at = nowDate - 1000 * 60 * 60 * 24;
      this.params.start_at = nowDate - 1000 * 60 * 60 * 24 * 7;
      let ymd = new Date(this.params.start_at);
      let y = ymd.getFullYear();
      let m = ymd.getMonth() + 1;
      let d = ymd.getDate();
      this.params.start_at = y + "-" + m + "-" + d;
      let ymd1 = new Date();
      let y1 = ymd1.getFullYear(this.params.end_at);
      let m1 = ymd1.getMonth() + 1;
      let d1 = ymd1.getDate();
      this.params.end_at = y1 + "-" + m1 + "-" + d1;
    },
  },
  created() {
    this.getDashboardData();
    this.$nextTick(() => {
      this.initTime();
      this.req("userRegister");
    })
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  background-color: #f1f2f9;
}

.el-main {
  padding: 20px 6px 0 20px;

  .header {
    height: 200px;
    display: flex;

    .headerItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      margin-right: 16px;

      span {
        font-size: 16px;
        color: #666;
        padding-left: 12px;
      }

      p {
        height: 36px;
        line-height: 36px;
        font-size: 36px;
        color: #333;
        padding-left: 12px;
      }

      .headerinfo {
        display: flex;
        height: 42px;
        line-height: 42px;
        background-color: #f1f2f9;

        span {
          flex: 1;

          strong {
            color: #3ca7fa;
          }
        }
      }

      &:last-child {
        padding: 0;
        margin-right: 0;
        background-color: #f1f2f9;

        .headerItemSmall {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 92px;
          background-color: #fff;
          margin-bottom: 14px;
          padding: 0 28px;
          border-radius: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          .headernum {
            flex: 1;
            font-size: 36px;
            font-weight: 600;
            color: #333;
          }

          span {
            width: 80px;

            strong {
              color: #3ca7fa;
              margin-left: 14px;
            }

            &:last-child {
              width: auto;
            }
          }
        }
      }
    }
  }

  .nav {
    height: 220px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;

    .navTitle {
      position: absolute;
      top: 28px;
      left: 32px;
      font-size: 16px;
      font-weight: 600;
    }

    .navItem {
      display: flex;
      flex-direction: column;
      padding: 68px 0 0 88px;

      .navItemImg {
        margin-bottom: 20px;

        img {
          width: 80px;
          height: 80px;
        }
      }

      .navCourse {
        width: 80px;
        text-align: center;
        font-size: 16px;
        color: #333;
      }
    }
  }

  .mineechart {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 6%);
    border-radius: 8px;
    margin-top: 20px;
    padding: 76px 28px 0;

    .mineechartTitle {
      position: absolute;
      top: 28px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .mineechartCon {
      .el-button {
        &.bg {
          background-color: #409eff;
          color: #fff;
        }
      }

      .block {
        margin-top: 40px;

        .el-date-editor {
          margin-right: 8px;
        }
      }

      #myecharts {
        margin-top: 20px;
        height: 260px;
      }
    }
  }
}

.el-footer {
  margin-top: 28px;
  text-align: center;
  background-color: #f1f2f9;

  .firstfoot {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
  }

  .secendfoot {
    font-size: 12px;
    color: #999;

    span {
      margin: 0 12px;
    }
  }
}
</style>